<template>
    <div class='container' ref="container">
        <!--  顶部栏层      -->
        <div class="topLayer" ref="topLayer" flex="cross:center main:justify">
            <div class="name" :class="{'n-c':isDev}" ref="blogName" @click="seeHide">
                {{$FS.USER.H5.NAME}}
            </div>
            <div class="menu" flex="cross:center main:center" @click="openMenu">
                <span class="iconfont iconcaidan icon"></span>
            </div>
        </div>
        <!--  文章列表层      -->
        <div class="articleLayer" ref="articleLayer" v-show="loading">
            <div class="articlMain" ref="articlMain" v-if="listData.length != 0">
                <div
                    class="articleItem"
                    flex="cross:top main:justify"
                    v-for="(item,index) in listData"
                    @click="goInfo(item)"
                    :key="index">
                    <div class="contentLeft">
                        <div class="title">{{item.name}}</div>
                        <div class="dec" >
                            <color-tag :tags="item.tag"></color-tag>
                        </div>
                    </div>
                    <div class="contentRight" flex="dir:top cross:center main:center" flex-box="1">
                        <dev-icon :size="'.853rem'" :tags="item.tag"></dev-icon>
                        <span class="text">{{item.words}}字</span>
                        <span class="text">{{item.pViews}}阅读</span>
                        <span class="text">{{item.updTime.substring(0,10)}}</span>
                    </div>
                </div>
            </div>
            <div v-else style="margin-top:2.86rem" flex="dir:top cross:center main:center">
                <span class="iconfont iconnc" style="font-size: 2.2rem"></span>
                <span>正在努力学习~</span>
            </div>
        </div>
        <!--  菜单  -->
        <sideMenu ref="sideMenu" @onMenuChange="getMenu"></sideMenu>
    </div>
</template>

<script>
    import Velocity from "velocity-animate"
    import  "velocity-animate/velocity.ui.js"
    import sideMenu from '@/components/sideMenu'
    import devIcon from '@/components/devIcon/devIcon'
    import colorTag from '@/components/colorTag'
    import { articleList } from '@/api/apis/auth.js'
    export default {
        name: "articleH5",
        components: {
            sideMenu,
            devIcon,
            colorTag
        },
        data() {
            return {
                listData:[],
                containerEl:null,
                blogNameEL:null,
                // 定时器
                interval:null,
                // 点击数量
                clickNum:0,
                // 定时器时间
                timeNum:0,
                // 是否为开发者模式
                isDev:false,
                // 文章类型id
                folderId:null,
                loading:false
            }
        },
        created() {
        },
        //离开页面之前将高度存储到sessionStorage
        beforeRouteLeave(to,from,next){
            sessionStorage.setItem('scrollH', this.containerEl.scrollTop)
            next()
        },
        activated(){
            if(sessionStorage.getItem('scrollH')){
                this.containerEl.scrollTop = sessionStorage.getItem('scrollH')
            }
        },
        mounted() {
            this.containerEl = this.$refs.container;
            this.articleList()
        },
        computed: {},
        methods: {
            // 隐藏操作
            seeHide(){
                if(this.clickNum == 0){
                    this.openinterval()
                }
                this.clickNum++;
                // 点击动画
                // if(!this.blogNameEL){
                //     this.blogNameEL = this.$refs.blogName;
                // }
                // Velocity(this.blogNameEL,'callout.pulse', { duration: 100 });
            },
            // 开启定时器
            openinterval(){
                if(this.interval){
                    this.clearItv()
                }
                this.interval = setInterval(()=>{
                    this.timeNum++;
                    if(this.clickNum >= 7 && this.timeNum<=5){
                        this.isDev = !this.isDev
                        this.clearItv();
                        this.articleList();
                    }
                    if(this.timeNum >=5){
                        this.clearItv()
                    }
                },1000)
            },
            //清除定时器
            clearItv(){
                clearInterval(this.interval)
                this.clickNum = 0
                this.timeNum = 0
            },
            // 随机取动画
            rdmAmt(){
                let animations =[
                    'transition.expandIn',
                    'transition.shrinkIn',
                    'transition.slideUpBigIn',
                    'transition.slideUpBigIn',
                    'transition.slideLeftBigIn',
                ]
                let max = animations.length;
                let min = 1;
                let randomNum = Math.floor(Math.random()*(max-min)+min);
                return animations[randomNum-1]

            },
            // 列表动画
            listAnimt(){
                this.$nextTick(()=>{
                    if(this.listData.length == 0)return;
                    let rows = this.$refs.articlMain.children
                    let amtStr  = this.rdmAmt();
                    Velocity(rows,amtStr, { stagger: 300 ,display: "flex"},{  });
                })
            },
            goInfo(item){
                this.$router.push('/articleInfoH5?articleId='+item.articleId)
            },
            openMenu(){
                this.$refs.sideMenu.changeShow()
            },
            getMenu(folderId){
                this.folderId = folderId?folderId.substr(1,folderId.length):null
                this.articleList()
            },
            articleList(){
                let param = {
                    folderId:this.folderId
                }
                // 传入ALL则可看到发布的笔记,否则只查看博客类型文章
                if(this.isDev){
                    param.type = 'ALL';
                }
                articleList(param).then(res=>{
                    let { code,data } = res;
                    if(code === 20000 ){
                        this.listData = data || []
                        this.listAnimt()
                    }
                    this.loading = true;
                })
            },
        },
    }
</script>
<style scoped lang='scss'>
.container{
    @include boxBase();
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 0.533rem 0.533rem;
    .topLayer{
        @include boxBase(100%,1.28rem);
        position: fixed;
        left: 0;
        top: 0;
        padding-left: .36rem;
        background-image: linear-gradient(to bottom right, #495058, #24272c);
        z-index: 200;
        transition: all .2s linear;
        .name{
            @include fontBase(.426rem,#fff);
            transition: color .2s ease;
            position: relative;
        }
        .n-c{
            color: #EEBD3A;
        }
        .menu{
            @include boxBase(1.28rem,1.28rem);
            .icon{
                @include fontBase(.48rem,#fff)
            }
        }
    }
    .articleLayer{
        @include boxBase();
        z-index: 100;
        padding: 1.48rem .32rem .52rem;
        .articlMain{
            padding-top: .32rem;
        }
        .articleItem{
            @include boxBase(100%,3.78rem);
            border: 1px solid #dedede;
            box-shadow: -1px 0px 5px 0px #eaeaea;
            border-radius: .213rem;
            margin-bottom: .48rem;
            padding: .32rem;
            background-color: rgba(255,255,255,.6);
            position: relative;
            .contentLeft{
                width: 64%;
                .title{
                    @include ellipsis(1);
                    font-size: .426rem;
                    font-weight: 800;
                    color: #007AFF;
                    margin-bottom: .32rem;
                }
                .dec{
                    height: 12vh;
                    font-size: .32rem;
                    color: #919191;
                    overflow: hidden;
                }

            }
            .contentRight{
                height: 100%;
                border-left: 1px solid #e4e4e4;
                margin-left: .32rem;
                .icon{
                    @include boxBase(.853rem,.853rem);
                    margin-bottom: .42rem;
                }
                .text{
                    color: #999999;
                    font-size: .32rem;
                    margin-bottom: .12rem;
                }
            }
        }
    }
}
</style>
